<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<style>
    *{
        margin: 0;
    }
    .loginForm{
        margin: 0 auto;
    }


</style>
<!-- 引入 layui.css -->
<link href="./layui/css/layui.css" rel="stylesheet">
<body>
<div class="loginForm" style="width: 50%;">
<form>
    <div class="usernameWrapDiv" >
        <div class="usernameLabel">
            <label>用户名:</label>
        </div>
        <div class="usernameDiv">
            <i class="layui-icon layui-icon-username adminIcon"></i>
            <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
        </div>
    </div>
    <div class="usernameWrapDiv">
        <div class="usernameLabel">
            <label>密码:</label>
        </div>
        <div class="passwordDiv">
            <i class="layui-icon layui-icon-password adminIcon"></i>
            <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
        </div>
    </div>
    <div class="usernameWrapDiv">
        <div class="submitDiv">
            <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
        </div>
    </div>
</form>
</div>
</body>
</html>
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./layui/layui.js"></script>
<script>
    localStorage.clear();
    layui.use(['layer'],function () {
        var layer = layui.layer;
    })
    $(function () {
        // 页面初始化生成验证码
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
    });

    // 登录流程
    function login() {

            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var params = {};
            params.loginUsername = loginUsername;
            params.loginPassword = loginPassword;
            var loginLoadIndex = layer.load(2);

            $('#loginBtn').val("正在登录...");
            $.ajax({
                type:'post',
                url:'./login.php',
                data:params,
                success:function (data) {
                    layer.close(loginLoadIndex);
                    var jsonData = JSON.parse(data);
                    if (jsonData.status){
                        layer.msg(jsonData.msg)
                        window.location.href = jsonData.jump;
                        $('#loginBtn').val("登录");
                    }else {
                        layer.msg(jsonData.msg)
                        $('#loginBtn').val("登录");
                    }
                },
                error:function () {
                    layer.msg("请求异常")
                    layer.close(loginLoadIndex);
                    $('#loginBtn').val("登录");
                }
            });


    }
</script>

